<template>
  <!-- :value="value" 把父组件的频道ID赋值个下拉框，显示对应的频道 -->
  <el-select @change="changeChannel" clearable :value="value" placeholder="请选择">
    <el-option
      v-for="item in channelOptions"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: 'MyChannel',
  // 接收父组件的频道ID，只读
  props: ['value'],
  data () {
    return {
      // 选中的频道ID
      // channelId: null,
      // 频道选项
      channelOptions: []
    }
  },
  created () {
    // 获取频道选项数据
    this.getChannelOptions()
  },
  methods: {
    async getChannelOptions () {
      const res = await this.$http.get('/v1_0/channels')
      this.channelOptions = res.data.data.channels
    },
    // 选择频道
    changeChannel (channelId) {
      // 子组件传递频道ID给父组件
      this.$emit('input', channelId)
    }
  }
}
</script>
<style scoped lang="less"></style>
